<template>
  <div class="add">
    <form @submit.prevent="addTodo">
      <input
        type="text"
        v-model="todo"
        placeholder="在这里添加一条留言"
        class="text"
        @input="changeContent"
      />
      <button type="submit">确定</button>
    </form>
  </div>
</template>

<script>
import axios from "axios";
import { Loading, MessageBox } from "element-ui";
export default {
  name: "Add",
  data() {
    return {
      todo: "",
    };
  },

  methods: {
    async addTodo() {
      if (this.todo === "") {
        MessageBox.alert("请输入一些留言");
        return;
      }
      const loading = Loading.service({
        target: ".add",
      });
      const res = await axios.post(
        "https://qc3vk3.api.cloudendpoint.cn/addData",
        {
          title: "默认标题 ",
          content: this.todo,
        }
      );
      this.todo = "";
      localStorage.setItem("content", "");
      loading.close();
      if (res.data.is_finished) {
        MessageBox.alert("留言添加成功");
      }
    },
    changeContent() {
      localStorage.setItem("content", this.todo);
    },
  },
  mounted() {
    this.todo = localStorage.getItem("content");
  },
};
</script>

<style scoped>
.add {
  padding: 20px;
  text-align: center;
}
.text {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
  height: 200px;
}
button {
  margin-top: 10px;

  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
}
button:hover {
  background-color: #17a71c;
}
button:active {
  background-color: #044b07;
}
</style>
